<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5触屏滑动侧边栏导航菜单特效 - 冰豆网</title>

<link rel="stylesheet" href="../css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="../css/default.css">
<link href="../css/offcanvas.min.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="overlay"></div>

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="offcanvas">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="#">Bootstrap响应式导航菜单</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse sidebar-offcanvas">
	  <ul class="nav navbar-nav">
		<li class="active"><a href="#">首页</a></li>
		<li><a href="#about">项目</a></li>
		<li><a href="#contact">关于我们</a></li>
	  </ul>
	</div><!--/.nav-collapse -->
  </div>
</nav>
<div class="container">
	<div class="row-offcanvas row-offcanvas-left">
		<div class="starter-template">
			<div class="row">
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-1.jpg" alt>
				</a>
			  </div>
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-2.jpg" alt>
				</a>
			  </div>
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-1.jpg" alt>
				</a>
			  </div>
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-2.jpg" alt>
				</a>
			  </div>
			</div>
			<div class="row">
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-1.jpg" alt>
				</a>
			  </div>
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-2.jpg" alt>
				</a>
			  </div>
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-1.jpg" alt>
				</a>
			  </div>
			  <div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
				  <img src="../img/thumb-2.jpg" alt>
				</a>
			  </div>
			</div>
		</div>
	</div>
</div><!-- /.container -->

<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/offcanvas.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.bingdou.net/" target="_blank">冰豆网</a></p>
</div>
</body>
</html>
<script>
var webviewAndroidScript =window.injs;

function initValue() {
webviewAndroidScript.setOnDrawerBackEnabled("1");
}

//下拉刷新
function onPullDown() {
webviewAndroidScript.onStopRefresh();
}

//上拉加载更多
function onPullUp() {
webviewAndroidScript.onStopRefresh();
}
</script>